.toaster {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10000;
    max-width: 100%;
    opacity: 0;
    transform: translate(75%, 0);
    pointer-events: none;
    -webkit-transition: all 0.3s ease, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.3s ease, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.3s ease, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s ease, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

    .toaster.displayed {
        opacity: 1;
        transform: translate(0, 0);
    }

    .toaster > .body {
        position: relative;
        font-size: initial;
        margin: 0 1em 1em 1em;
        padding: .5em;
        word-wrap: break-word;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.9);
        pointer-events: all;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        font-weight: 700;
    }

        .toaster > .body.info {
            background: rgba(255, 245, 195, 0.9);
        }

        .toaster > .body.warning {
            background: rgba(255, 183, 99, 0.9);
        }

            .toaster > .body.warning > .icon {
                color: white;
            }

        .toaster > .body.error {
            color: #78261f;
            background-color: #fadbd8;
            border-color: #f8ccc8;
        }

        .toaster > .body.done {
            color: #0f6848;
            background-color: #d2f4e8;
            border-color: #bff0de;
        }